<template>
    <div class="collect-page">
        <!-- Header -->
        <Header title="我的收藏">
            <template v-slot:back>
                <span @click="$router.go(-1)">&lt;</span>
            </template>
            <template v-slot:ope>
                
            </template>

        </Header>

        <!-- 店铺列表 -->
        <div class="list" v-if="collectList.length > 0">
            <router-link :to="{name:'shopdetail',params: item }" class="item" v-for="(item,index) in collectList" :key="index">
                <div class="pic">
                    <img :src="item.pic" alt="">
                </div>
                <div class="text">
                    <div class="name">{{item.name}}</div>
                    <div>月售: {{item.buyCount}}</div>
                    <div>描述: {{item.desc}}</div>
                </div>
            </router-link>
        </div>
        <div class="empty" v-else>您还没有收藏的商家!</div>
    </div>
</template>

<script>

/* 从 vuex导入 mapState方法( 用于注入数据 ) */
import {mapState} from 'vuex'

export default {
    data(){
        return {
            
        }
    },
    computed:{
        ...mapState(['collectList'])
    }
}
</script>
<style scoped>
.list .item{
    text-decoration: none;
    color: #333;
    font-size: 14px;
    display: flex;
    margin: 20px ;
  }
  .list .item .pic{
    width: 80px;
    margin-right: 20px;
  }
  .list .item .pic img{
    width: 100%;
  }
  .list .item .text{
    flex: 1;;
  }
  .list .item .text .name{
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
  }

  .empty{
      text-align: center;
      padding: 50px 0;
  }
</style>